<!-- 我的收益 -->
<template>
    <div class="profit_page">
        <div class="profitBox flex_btn">
            <div class="all_money_sty flex_cen_cen">
                <div><span style="font-size: 24px;font-weight:700;color: #000;margin-right: 10px;">700</span>元</div>
                <div style="margin: 12px 0;">累计收益1200元</div>
                <div class="flex_btn">
                    <div class="exchange_btn_sty">兑换户币</div>
                    <div class="withdrawal_btn_sty">提现</div>
                </div>
            </div>
            <div class="profit_detail_sty">
                <div class="detail_tit_sty">收益情况</div>
                <div class="flex_ard">
                    <div class="profit_item_sty">
                        <div>+0</div>
                        <div class="progit_name_sty">昨日收益</div>
                    </div>
                    <div class="profit_item_sty">
                        <div>+0</div>
                        <div class="progit_name_sty">本周收益</div>
                    </div>
                    <div class="profit_item_sty">
                        <div>+0</div>
                        <div class="progit_name_sty">本月收益</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="profit_main_box">
            <div class="profit_tab_box flex_str">
                <div class="tab_item_sty" v-for="(item, _index) in tabList" :key="item.id" @click="tabClick(item.id)"
                    :style="tabId == item.id ? 'border-bottom: 3px solid #E53236;' : ''">
                    {{ item.name }}</div>
                <div>
                    <el-config-provider :locale="locale">
                        <el-date-picker v-model="pickTime" type="daterange" range-separator="--"
                            start-placeholder="开始时间" end-placeholder="结束时间" />
                    </el-config-provider>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
// 时间段
const pickTime = ref('')

const tabList = ref([
    {
        id: 1,
        name: '收益明细'
    }, {
        id: 2,
        name: '提现明细'
    }, {
        id: 3,
        name: '兑换明细'
    }, {
        id: 4,
        name: '悬赏明细'
    }
])
const tabId = ref(1)

const tabClick = (id: number) => {
    tabId.value = id
}
</script>

<style scoped>
.profit_tab_box {}

.tab_item_sty {
    width: 120px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    margin: 0 20px;
    border-bottom: 3px solid #D8D8D8;
}

.profit_page {
    width: 80%;
}

.profit_main_box {
    width: 100%;
    background-color: #fff;
    min-height: 500px;
    margin-top: 20px;
}

.progit_name_sty {
    font-size: 18px;
    color: #D8D8D8;
    margin-top: 20px;
}

.profit_item_sty {
    text-align: center;
    margin-top: 20px;
}

.detail_tit_sty {
    font-size: 18px;
    color: #D8D8D8;
    margin: 20px;
}

.profitBox {
    width: 100%;
}

.all_money_sty {
    width: 23%;
    height: 200px;
    text-align: center;
    background-color: #fff;
    font-size: 18px;
    color: #D8D8D8;
}

.profit_detail_sty {
    width: 76%;
    height: 200px;
    background-color: #fff;
}

.exchange_btn_sty {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #D8D8D8;
    color: #fff;
    margin-right: 20px;
    font-size: 16px;
    border-radius: 2px;
}

.withdrawal_btn_sty {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: #E53236;
    color: #fff;
    font-size: 16px;
    border-radius: 2px;

}
</style>